// import React, { Component } from 'react'
// // 类组件,这是旧的写法 新版也支持,但是有一个种更好的写法
// export default class App extends Component {
//   // data -> state 
//   state = {
//     count:1 
//   }
//   fn = ()=>{
//     // 和小程序很像
//     this.setState({
//       count:this.state.count+1 
//     })
//   }
//   // 这个类似vue3中的onMounted 
//   componentDidMount(){

//   }
//   // 类似vue3中onUnMounted vue2中beforeDestroy
//   componentWillUnmount(){

//   }
//   render() {
//     return (
//       <>
//         <button onClick={this.fn}>按钮</button>
//         <div>{this.state.count}</div>
//       </>
//     )
//   }
// }

// 函数式组件
import {useState,useEffect} from 'react'
export default function App(){
  // count,setCount这二个单词是我随便写的
  const [count,setCount] = useState(0)
  
  //这个写法类似watch侦听器
  // useEffect(()=>{
  //   console.log(123);
  // },[count])

  //类似onMounted 类似类组件中 componentDidMount
  useEffect(()=>{
    console.log(123);
  },[])
  return <>
    <button onClick={()=>setCount(count+1)}>按钮</button>
    <p>{count}</p>
  </>
}